<template>
  <!-- 文本编辑区 -->
  <b-container class="mainEditorCard" fluid>
    <b-collapse id="editor">
      <pre class="mt-1 mb-0" />

      <b-row>
        <div style="margin-top: 1%">
          <textarea
            class="editorCard"
            id="textarea"
            v-model="text"
            placeholder="有什么伤心的事情说出来让大家高兴高兴..."
            rows="3"
            max-rows="6"
          />
        </div>
      </b-row>

      <pre class="mt-1 mb-0" />
      <b-row>
        <b-col md="2" style="text-align: left">
          <b-link v-b-toggle.editor @click="setVisible" class="linkStyle">
            收起↑↑↑
          </b-link>
        </b-col>
        <b-col style="text-align: right">
          <b-link style="margin: 0.8%; text-decoration: none; max-width: 100%">
            <b-icon icon="image" />
            <span> 插入图片</span>
          </b-link>
          <b-button class="textEditorButton" variant="outline-danger">
            清 空
          </b-button>
          <b-button class="textEditorButton" variant="outline-primary">
            保存为草稿
          </b-button>
          <b-button @click="sendMessage(text)" class="textEditorButton" variant="outline-success">
            发 布
          </b-button>
        </b-col>
      </b-row>
    </b-collapse>

    <!-- 提示语 -->
    <b-row class="tips" v-show="tipShow">
      <b-list-group-item @click="setVisible" v-b-toggle.editor href="#">
        编辑动态
      </b-list-group-item>
    </b-row>
  </b-container>
</template>

<script>
export default {
  name: "MainTextEditor",
  data() {
    return {
      text: "",
      //提示板开关
      tipShow: true,
    };
  },
  methods: {
    //设置tips的显示与否
    setVisible() {
      this.tipShow = !this.tipShow;
    },
    //发送动态
    sendMessage(text) {
      //数据库还不知道怎么设计的,暂时是用数据库id查询这个用户
      console.log("发布一条新动态" +text);
      this.showResult(true);
    },
    //发送评论或回复成功失败的提示框
    showResult(result) {
      const h = this.$createElement;
      const titleVNode = h("p", ["return"]);
      var messageVNode = null;
      if (result) {
        messageVNode = h("div", { class: ["foobar"] }, [
          h("p", { style: { color: "green" } }, ["发送成功"]),
        ]);
      } else {
        messageVNode = h("div", { class: ["foobar"] }, [
          h("p", { style: { color: "red" } }, ["发送失败"]),
        ]);
      }

      this.$bvModal.msgBoxOk([messageVNode], {
        title: [titleVNode],
        centered: true,
        hideBackdrop: true,
      });
    },
  },
  mounted() {},
};
</script>

<style scope lang="css">
.editorCard {
  border-radius: 5px;
  padding: 0;
  width: 100%;
  outline: none;
  border-color: rgba(133, 133, 133, 0.587);
  resize: none;
  flex-wrap: wrap; 
}
.textEditorButton {
  max-block-size: 80%;
  max-width: 80%;
  margin: 0.8%;
}
.linkStyle {
  margin: 0.8%;
  text-decoration: none;
}
.mainEditorCard {
  border-radius: 15px;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.258);
  margin-top: 0.1%;
}
.tips {
  border-radius: 15px;
  /* box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.258); */
  box-shadow: 0 2px 10px 0 rgba(14, 171, 228, 0.285);
  text-align: center;
  background-color: #fcfcdf;
  font-size: 1%;
}
</style>